/*
 * @Author: ray
 * @Date:   2019-06-10 05:12:35
 * @Last Modified by:   ray
 * @Last Modified time: 2019-06-26 14:52:27
 */
import "./YankeSelectCard.css";
// import returnData from "./YankeSelectCardData";
import ZenTabs from "@root/components/ZenUI/ZenTabs/ZenTabs";
import ZenCheckbox from "@root/components/ZenUI/ZenCheckbox/ZenCheckbox";
export default function YanKeSelectCard(props) {
	const extraDataRaw = props.item.extraData;
	// console.log(props.item);
	const [currentState, updateState] = usePartState({
		selectCount: 0,
		isLoading: true
	});
	// props.item.passParams("abc");
	let rawList = [];
	function testClick() {}
	function getCardData() {
		/*rawList = Uts.copyObj(returnData.fundProjects);
		updateState({
			cardList: returnData.fundProjects,
			isLoading: false,
			rawCardList: rawList
		});
		return false;*/
		// rawList = Uts.copyObj(current);
		let url = "/store/api/order/tpiFundCards";
		REST.post(
			url,
			{ departmentId: extraDataRaw.selectDepart },
			"getInfo"
		).then(
			function(data) {
				//console.log(data);
				if (data.code == "0000") {
					rawList = Uts.copyObj(data.fundProjects);
					updateState({
						cardList: data.fundProjects,
						isLoading: false,
						rawCardList: rawList,
						selectIndex: null,
						selectCount: 0
					});
				}
			},
			function(error) {
				//console.log(error);
				updateState({ isLoading: false });
			}
		);
	}

	function handleChange(value, item, index, extraData) {
		cancelOtherItem(value, item, index, extraData);
		updateState({
			selectIndex: item.value ? extraData.pIndex : null,
			selectChildCard: item,
			selectCount: item.value
				? item.banlanceAmount - extraDataRaw.count >= 0
					? extraDataRaw.count
					: item.banlanceAmount
				: 0
		});
		props.item.passParams({
			parentCard: currentState.cardList[extraData.pIndex],
			currentChildCard: item
		});
		// props.item.passParams(item);
	}

	function cancelOtherItem(value, item, index, extraData) {
		Uts.each(currentState.cardList, function(item2, index2) {
			Uts.each(item2.fundCards[0].subjects, function(item3, index3) {
				if (item3.id != item.id) {
					item3.value = false;
				}
			});
		});
		updateState({ cardList: currentState.cardList });
	}

	function LabelItem(props) {
		const { item } = props;
		return (
			<React.Fragment>
				<span className="zen_w-p18 zen_il-bl">{item.subjectName}</span>
				<span className="zen_m-l-6 zen_w-p25 zen_il-bl">
					可用余额：￥{item.banlanceAmount}
				</span>
				<span className="zen_m-l-6 zen_w-p25 zen_il-bl zen_A4A4A4">
					冻结：￥{item.freezeAmount}
				</span>
				<span className="zen_f-right zen_w-p26 ">
					使用金额
					<span className="zen_red">￥</span>
					<input
						type="text"
						readonly="readonly"
						className="YankeSelectCard-input zen_w-p50 zen_m-l-4 zen_red zen_bd-1-gray"
						value={
							item.value
								? Uts.min(
										extraDataRaw.count,
										item.banlanceAmount
								  )
								: 0
						}
						onChange={e => {
							handleCountChange(e, item);
						}}
					/>
				</span>
			</React.Fragment>
		);
	}

	function addComponentToList(item, index) {
		Uts.each(item.fundCards[0].subjects, function(childItem, index) {
			childItem.label = LabelItem;
		});
	}

	function filterSearch(event) {
		let value = event.target.value;
		let newList = [];
		Uts.each(rawList, function(item, index) {
			// for(var opt in item){
			if (
				Uts.contain(item.projectName, value, 1) ||
				Uts.contain(item.managerName, value, 1) ||
				Uts.contain(item.id, value, 1)
			) {
				newList.push(item);
			}
			// }
		});
		updateState({ cardList: newList });
		// console.log(event);
	}

	function handleCountChange(event, item) {
		let value = event.target.value;
		// item.inputValue=value;
		updateState({ selectCount: value });
		// console.log(event);
	}

	function selectObj(item, index) {
		item.showChild = !item.showChild;
		// updateState({ selectIndex: index });
		updateState({ cardList: currentState.cardList });
	}

	//change the footer button class
	React.useEffect(() => {
		getCardData();
		if (currentState.selectIndex) {
			props.item.passParams({
				parentCard: currentState.cardList[currentState.selectIndex],
				currentChildCard: currentState.selectChildCard
			});
		}
		// updateState({cardList:returnData.fundProjects});
		/*props.item.changeFooterClass({
	        okClass: "testOk",
	        cancelClass: "testCancel"
	    });*/
	}, []);

	React.useEffect(() => {
		if (
			Uts.isDefined(currentState.selectIndex) &&
			currentState.selectIndex != null
		) {
			props.item.passParams({
				parentCard: currentState.cardList[currentState.selectIndex],
				currentChildCard: currentState.selectChildCard
			});
		}
	});

	React.useEffect(() => {
		rawList = Uts.copyObj(currentState.rawCardList);
	});

	React.useEffect(() => {
		// console.log("change props.item.extraData", props.item.extraData);
		getCardData();
	}, [props.item.extraData.selectDepart]);

	return (
		<div className="zen_m-h-32 zen_m-v-18">
			<div className="zen_bg-gray zen_p-16">
				<div className="zen_il-bl">
					<div>
						<span className="zen_969696">订单金额</span>{" "}
						&nbsp;&nbsp;{" "}
						<span>
							￥{Filter.float(extraDataRaw.count, 2, true)}
						</span>
					</div>
					<div>
						<span className="zen_969696">已选金额</span>{" "}
						&nbsp;&nbsp;{" "}
						<span>
							￥{Filter.float(currentState.selectCount, 2, true)}
						</span>{" "}
						<span className="zen_m-l-32 zen_red">
							{currentState.selectCount - extraDataRaw.count >= 0
								? "已选金额足够"
								: "已选金额不足"}
						</span>
					</div>
				</div>
				<div className="zen_il-bl zen_f-right zen_m-t-15 zen_969696">
					经费使用原则：先拨款，后自筹
				</div>
			</div>
			<input
				type="text"
				onChange={filterSearch}
				placeholder="输入卡号、项目名称、负责人可以直接搜索"
				className="zen_bd-1-gray zen_f-right zen_p-8 zen_m-t-20 zen_ps-re zen_z-i-3 zen_fs-16 zen_w-p50"
			/>
			<ZenTabs
				activeindex="0"
				dynamicload="true"
				className="YankeSelectCard zen_m-t-20"
			>
				<ZenTabs.Tab
					onClick={testClick}
					title="所有经费卡"
					className="zen_p-t-16 zen_p-b-12 tm-sc-text"
				>
					<div
						style={{
							minHeight: "317px",
							paddingBottom: "20px",
							paddingTop: "20px"
						}}
					>
						{currentState.isLoading && (
							<div className="zen_p-30 zen_t-c">
								正在获取经费卡...
							</div>
						)}
						{currentState.cardList &&
							currentState.cardList.length == 0 && (
								<div className="zen_p-v-8">
									对不起，没有您想搜索的经费卡
								</div>
							)}
						{currentState.cardList &&
							currentState.cardList.map(function(item, index) {
								addComponentToList(item, index);
								return (
									<div
										key={item.id}
										className="YankeSelectCard-wrap"
									>
										<div
											className={Uts.sc([
												"zen_p-v-18 zen_p-h-16 zen_bd-1-gray",
												currentState.selectIndex ==
												index
													? "zen_white yanke-m-bg-color"
													: ""
											])}
											onClick={() => {
												selectObj(item, index);
											}}
										>
											<span>
												开启时间{" "}
												{Filter.formatDate(
													item.fundCards[0].startTime,
													"Ym"
												)}
											</span>
											<span className="zen_m-l-25 zen_il-bl zen_w-p8 zen_t-c">
												{item.managerName}
											</span>
											<span className="zen_il-bl zen_m-l-30 zen_w-p35">
												{Filter.cutString(
													item.projectName.split(
														","
													)[0],
													15,
													1
												)}
											</span>
											<span className="zen_il-bl zen_m-l-30 zen_w-p20">
												{Filter.cutString(
													item.projectName.split(
														","
													)[1],
													15,
													1
												)}
											</span>
											<span className="zen_fs-24">></span>
										</div>
										{item.showChild && (
											<ZenCheckbox
												formData={item.fundCards[0]}
												name="subjects"
												change={handleChange}
												listClass="YankeSelectCard zen_w-p100 zen_p-v-16 zen_p-h-24 zen_bd-1-gray"
												labelClass="zen_w-p100 zen_fs-14"
												inputClass="zen_v-m"
												extraData={{ pIndex: index }}
											/>
										)}
									</div>
								);
							})}
					</div>
					&nbsp;
				</ZenTabs.Tab>
				<ZenTabs.Tab
					onClick={testClick}
					title={
						"已选经费卡" +
						(Uts.isDefined(currentState.selectIndex) &&
						currentState.selectIndex != null
							? "(1)"
							: "(0)")
					}
					className="zen_p-t-16 zen_p-b-12 tm-sc-text"
				>
					<div
						style={{
							minHeight: "317px",
							paddingBottom: "20px",
							paddingTop: "20px"
						}}
					>
						{!Uts.isDefined(currentState.selectIndex) && (
							<div className="zen_p-30 zen_t-c">
								请先选择经费卡
							</div>
						)}

						{Uts.isDefined(currentState.selectIndex) &&
							currentState.cardList &&
							currentState.cardList.map(function(item, index) {
								addComponentToList(item, index);
								return (
									index == currentState.selectIndex && (
										<div
											key={item.id}
											className="YankeSelectCard-wrap"
										>
											<div
												className={Uts.sc([
													"zen_p-v-18 zen_p-h-16 zen_bd-1-gray",
													currentState.selectIndex ==
													index
														? "zen_white yanke-m-bg-color"
														: ""
												])}
												onClick={() => {
													selectObj(item, index);
												}}
											>
												<span>
													开启时间{" "}
													{Filter.formatDate(
														item.fundCards[0]
															.startTime,
														"Ym"
													)}
												</span>
												<span className="zen_m-l-50">
													{item.managerName}
												</span>
												<span className="zen_il-bl zen_m-l-50 zen_w-p60">
													{Filter.cutString(
														item.projectName,
														30,
														1
													)}
												</span>
												<span className="zen_fs-24">
													>
												</span>
											</div>
											{item.showChild && (
												<ZenCheckbox
													formData={item.fundCards[0]}
													name="subjects"
													change={handleChange}
													listClass="zen_w-p100 zen_p-v-16 zen_p-h-24 zen_bd-1-gray"
													labelClass="zen_w-p100 zen_fs-14"
													inputClass="zen_v-m"
													extraData={{
														pIndex: index
													}}
												/>
											)}
										</div>
									)
								);
							})}
					</div>
					&nbsp;
				</ZenTabs.Tab>
			</ZenTabs>
		</div>
	);
}

/*

{currentState.cardList&&currentState.cardList.map(function(item,index){
                	return (<div></div>);
                })}
 */
